<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-11-17 13:10:28
 * @LastEditors: tangcj 572036028@qq.com
 * @LastEditTime: 2023-12-07 11:38:15
 * @FilePath: /hgpt-admin/src/pages/reservationSearch/index.vue
 * @Description: 文件介绍
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="reservationSearch">
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      :inline="true"
      style="display: flex; justify-content: space-between"
    >
      <el-form-item label="套餐">
        <el-select v-model="form.pkgType" placeholder="请选择">
          <el-option
            v-for="item in TCOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker
          v-model="form.dateArr"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="时段">
        <el-select v-model="form.period" placeholder="请选择">
          <el-option
            v-for="item in timeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form.status" placeholder="请选择">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="btnBox">
      <el-button @click="rest">重置</el-button>
      <el-button type="primary" @click="clickSearch">查询</el-button>
    </div>
    <div class="tableBox">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        height="100%"
        border
      >
        <el-table-column prop="name" label="姓名" align="center">
        </el-table-column>
        <el-table-column
          prop="reservation_date"
          label="预约日期"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="reservation_period"
          label="预约时段"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="reservation_number"
          label="预约编号"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="file_name" label="信息" align="center">
        </el-table-column>
        <el-table-column
          prop="package_type_name"
          label="预约套餐"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="check_status" label="操作" align="center">
          <template slot-scope="scope">
            <span
              @click="changeStatus(scope.row)"
              :style="
                scope.row.check_status == 1
                  ? ''
                  : 'color:#169BD5;cursor: pointer;'
              "
            >
              {{ scope.row.check_status == 1 ? "已完成" : "待检测" }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paginationBox">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :total="total"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, prev, pager, next,sizes"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      TCOptions: [
        {
          label: "全部",
          value: ""
        },
        {
          label: "银江全身报告",
          value: 1
        },
        {
          label: "银江展会体检包",
          value: 2
        },
        {
          label: "全身疾病筛查",
          value: 3
        }
      ],
      timeOptions: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "10:00-11:00",
          value: "10:00-11:00"
        },
        {
          label: "11:00-12:00",
          value: "11:00-12:00"
        },
        {
          label: "13:00-14:00",
          value: "13:00-14:00"
        },
        {
          label: "14:00-15:00",
          value: "14:00-15:00"
        },
        {
          label: "15:00-16:00",
          value: "15:00-16:00"
        },
        {
          label: "16:00-17:00",
          value: "16:00-17:00"
        },
      ],
      statusOptions: [
        {
          label: "全部",
          value: ""
        },
        {
          label: "已体检",
          value: 1
        },
        {
          label: "未体检",
          value: 0
        }
      ],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      form: {
        pkgType: '',
        dateArr: [],
        period: "",
        status: "",
      },
      options: [],
    }
  },
  mounted () {
    this.getListData()
  },
  methods: {
    // 获取表格数据
    getListData () {
      const params = {
        page: this.currentPage,
        size: this.pageSize,
        startData: this.form.dateArr[0] || "",
        endData: this.form.dateArr[1] || "",
        period: this.form.period,
        pkgType: this.form.pkgType,
        status: this.form.status,
      }
      this.$api.get('rest/aiHealthReport/reservationInfoWeb', params).then(res => {
        console.log(res, 'res')
        this.tableData = res.result.records
        this.total = res.result.total
      })
    },
    // 分页
    handleSizeChange (v) {
      this.pageSize = v
      this.getListData()
    },
    handleCurrentChange (v) {
      this.currentPage = v
      this.getListData()
    },
    // 点击查询
    clickSearch () {
      this.currentPage = 1
      this.getListData()
    },
    // 重置
    rest () {
      this.form = {
        pkgType: '',
        dateArr: [],
        period: "",
        status: "",
      }
    },
    // 修改已完成状态
    changeStatus (row) {
      console.log(row)
      this.$confirm('确认将 "' + row.name + '" 的 "' + row.package_type_name + '" 检测状态修改为已完成？', '确认操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          reservationNumber: row.reservation_number
        }
        this.$api.get('rest/aiHealthReport/checkIn', params).then(res => {
          if (res.statusCode == '200') {
            this.$message.success("修改成功")
            this.getListData()
          } else {
            this.$message.error(res.message || "修改失败")
          }
        })
      }).catch(() => {
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.reservationSearch {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  .btnBox {
    display: flex;
    justify-content: end;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .tableBox {
    flex: 1;
  }
  .paginationBox {
    width: 100%;
    display: flex;
    padding: 10px;
    justify-content: flex-end;
  }
}
</style>>

